<template>
	<view class="uploadvideo">
		<view class="content">
			<uni-forms v-model="videoData" :rules="rules" ref="videoRef">
				<uni-forms-item name="videoSourceId">
					<view class="addvideo" v-if="videoData.videoSourceId==''" @click="chooseVideo">
						<text>点击添加视频</text>
					</view>
					<view class="video" v-if="videoData.videoSourceId!=''">
						<video :src="videoData.videoSourceId"></video>
						<uni-icons type="closeempty" size="20" @click="deleteVideo"></uni-icons>
						<view class="filename">{{fileName}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="title">
					<uni-easyinput placeholder="合适的标题可以吸引更多人观看哦~" v-model="videoData.title"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btn">
			<button type="primary" @click="previous">上一步</button>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		apiAddCourse,
		apiUploadVideo
	} from '../../apis/course.js'
	import {
		isTeacher
	} from '../../apis/teacher.js'
	const videoUrl = ref({})
	const videoData = ref({
		courseId: '',
		videoSourceId: '',
		title: '',
		duration: '',
		size: ''
	})
	const fileName = ref('')
	const videoRef = ref(null)
	const formData = ref({})
	const rules = ref({
		videoSourceId: {
			rules: [{
				required: true,
				errorMessage: '请上传视频'
			}]
		},
		title: {
			rules: [{
				required: true,
				errorMessage: '请输入标题'
			}]
		}
	})

	// 选择视频
	const chooseVideo = (e) => {
		uni.chooseVideo({
			count: 1,
			sourceType: ['album'],
			success: (e) => {
				console.log(e)
				const tempVideoPath = e.tempFilePath
				fileName.value = e.name
				videoData.value.duration = e.duration
				videoData.value.size = (e.size / 1024 / 1024)
				uni.uploadFile({
					url: 'http://172.16.7.75:82/teacher/testupload',
					filePath: tempVideoPath,
					name: 'file',
					success: (res) => {
						const data = JSON.parse(res.data)
						videoData.value.videoSourceId = data.data
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			}
		})
	}
	const deleteVideo = () => {
		videoData.value.videoSourceId = ''
		videoUrl.value = {}
	}
	const previous = () => {
		uni.navigateBack()
	}
	onLoad((e) => {
		formData.value = JSON.parse(e.formData)
		getTeacherId(uni.getStorageSync("member").mobile)
	})
	const submit = () => {
		videoRef.value.validate().then(() => {
			addCourse(formData.value)
			uni.showToast({
				title: '添加成功',
				icon: 'success',
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 300)
		}).catch(() => {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'error'
			})
		})
	}
	const addCourse = async (course) => {
		const res = await apiAddCourse(course)
		console.log(res)
		console.log(res.data)
		console.log(res.data.data)
		if (res.data.code == 200) {
			videoData.value.courseId = res.data.data.id
			console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
			console.log(videoData.value)
			console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
			uploadVideo(videoData.value)
		}
	}
	const uploadVideo = async (video) => {
		const res = await apiUploadVideo(video)
	}
	const getTeacherId = async (phone) => {
		const res = await isTeacher(phone)
		formData.value.teacherId = res.data.data.id
	}
</script>

<style lang="scss" scoped>
	.uploadvideo {
		padding: 50rpx 30rpx;
		background:
			linear-gradient(to bottom, transparent, #fff),
			linear-gradient(to right, #beecd8, #F4E2D8);
		min-height: 100vh;

		.content {
			background: white;
			border-radius: 20rpx;
			// padding: 30rpx;
			box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
			overflow: hidden;
			padding: 30rpx;

			.addvideo {
				width: 100%;
				height: 300rpx;
				background: #f5f5f5;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #666;
			}

			.video {
				height: 300rpx;
				position: relative;
				color: red;
				margin-bottom: 30rpx;
				video {
					width: 100%;
					height: 100%;
				}

				.uni-icons {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					background: #eee;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 100;
				}
				.filename{
					width: 500rpx;
					margin: 0 auto;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					font-size: 24rpx;
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		.btn {
			width: 100%;
			height: 100rpx;
			color: #666;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;

			button {
				width: 100%;
				height: 80rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 80rpx;
				margin: 0 10rpx;
			}
		}
	}
</style>